<template>
  <div v-loading="loading" class="workorder-detail">
    <card-box v-if="detail && detail.tasks && detail.tasks.length" title="工单状态信息">
      <com-step :steps="steps" :active="active" @index-change="indexChange"></com-step>
    </card-box>
    <card-box title="工单基础信息">
      <div class="base-info">
        <template v-if="detail && detail.base">
          <div class="form-row">
            <label-value label="客户名称" :value="detail.base.clientName || '无'"></label-value>
            <spliter />
            <label-value label="编号" :value="detail.base.flowCode || '无'"></label-value>
          </div>
          <div class="form-row">
            <label-value label="客户站点" :value="detail.base.substationname || '无'"></label-value>
            <spliter />
            <label-value label="完成时间" :value="curStep.updateTime || '无'"></label-value>
          </div>
          <div class="form-row">
            <label-value label="工单类型" :value="priorityList[detail.base.priorityId] || '无'"></label-value>
            <spliter />
            <label-value label="工单优先级" :value="priorityList[detail.base.priorityId] || '无'"></label-value>
            <spliter />
            <label-value label="节点操作人" :value="curStep.operatorName || '无'"></label-value>
          </div>
          <div class="form-row">
            <label-value label="工单内容描述" multiple :value="detail.base.details || '无'"></label-value>
          </div>
        </template>
      </div>
    </card-box>
  </div>
</template>

<script>
import CardBox from "@/components/CardBox";
import { getOrderDetail } from "@/api/workorder";
import ComStep from "@/components/ComStep";
import LabelValue from "@/components/LabelValue";
import Spliter from "@/components/Spliter";
export default {
  components: {
    CardBox,
    ComStep,
    LabelValue,
    Spliter
  },
  props: {
    id: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      loading: true,
      detail: null,
      active: 0,
      priorityList: ["抢修工单", "检修工单", "巡检工单", "巡视工单"],
      curId: null,
      curStep: {}
    };
  },
  computed: {
    steps() {
      if (!this.detail) {
        return [];
      }
      if (!this.detail.tasks) {
        return [];
      }
      return this.detail.tasks.map(t => ({
        ...t,
        id: t.pkid,
        time: t.updateTime,
        name: t.nodeDefName
      }));
    }
  },
  watch: {
    id: {
      handler: function(v) {
        this.loading = true;
        getOrderDetail(v)
          .then(data => {
            this.detail = data;
            for (let i = 0; i < data.tasks.length; i++) {
              if (data.tasks[i].statusId === 1) {
                this.active = i;
              }
            }
            this.curStep = data.tasks[this.active] || {};
          })
          .finally(() => (this.loading = false));
      },
      immediate: true
    }
  },
  methods: {
    indexChange(index) {
      this.curStep = this.detail.tasks[index];
    }
  }
};
</script>

<style lang="scss" scoped>
.workorder-detail {
  min-width: 70vw;
}

.com-card-box:first-child {
  margin-bottom: 20px;
}
.form-row {
  margin-bottom: 18px;
}
</style>
